import { html, NE } from 'nvagir'

/**
 * 存储用户信息组件信息的数据结构
 *
 * @remarks
 * 由头像图片URL、用户名、用户简介组成
 */
type UserData = {
  avatarURL: string
  userName: string
  userIntro: string
  settingPath: string
}

/**
 * 用于生成一个侧边栏的用户信息组件
 *
 * @remarks
 * 将在 MainSideBar 组件中引用该组件
 *
 * @param avatarURL - 头像图片URL
 * @param userName - 用户名
 * @param userIntro - 用户简介
 * @returns 侧边栏的用户信息组件
 */
const UserInfo = ({
  avatarURL,
  userName,
  userIntro,
  settingPath,
}: UserData) => {
  const avatarClickHandler: EventListener = () => {
    history.nvagirRouter.push(settingPath)
  }

  const { el } = html`
    <div class="user-account-info">
      <div class="avatar" n@click=${avatarClickHandler}>
        <img src="${avatarURL}" alt="avatar" />
      </div>
      <h3 class="user-name">${userName}</h3>
      <p class="user-intro">${userIntro}</p>
    </div>
  `

  // 子组件返回
  const result: NE<'UserInfo'> = { name: 'UserInfo', el }
  return result
}

export default UserInfo
